<template>
  <div class="loginCss">
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="4">
          <a-form-item >
            <a-input
              v-decorator="['username',{ rules: [{ required: true, message: '请输入用户名!' }] }]"
              placeholder="用户名"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0,0,0,.25)"
              />
            </a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="4">
          <a-form-item>
            <a-input
              v-decorator="['password',{ rules: [{ required: true, message: '请输入密码!' }] }]"
              type="password"
              placeholder="密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0,0,0,.25)"
              />
            </a-input>
         </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="6">
          <a-form-item>
            <a-checkbox
              v-decorator="[
              'remember',
              {
              valuePropName: 'checked',
              initialValue: true,
              }]"
            >
              Remember me
            </a-checkbox>
            <a
              class="login-form-forgot"
              href=""
            >
              Forgot password
            </a>
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
            >
              Log in
            </a-button>
            Or<a href="">register now!</a>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  props: {
    msg: String
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault();
      this.form.validateFields((errors, values) => {
        if (!errors) {
          this.axios({
            method: 'POST',   //使用GET方法改为“GET”
            url: '/api/demoController/getPostInfo',   //使用/api/demoController/getInfo
            data: {
              id: 2,
              username: values.username,
              password: values.password
            },
            params: {
              //Get变量的参数写在这
            }
          }).then(function (response) {
            console.log(response.data)
          }).catch(function (error) {
            alert(error);
          });
        }
      });
    },
  },
}
</script>

<style scoped>

</style>
